.w-select {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  font-size: $base-font-size;

  &--disabled {
    color: $disabled-color;
    cursor: not-allowed;
    -webkit-tap-highlight-color: transparent;
  }

  // Selection wrapper.
  // ------------------------------------------------------
  &__selection-wrap {
    position: relative;
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    min-height: $form-field-height; // Min-height to allow multiple lines.
    border-radius: $border-radius;
    border: $border;
    transition: border $transition-duration;
    &--tile {
      border-radius: initial;
    }
    &--shadow {
      box-shadow: $box-shadow;
    }

    .w-select--floating-label & {
      margin-top: 3 * $base-increment;
    }

    &--underline {
      border-bottom-left-radius: initial;
      border-bottom-right-radius: initial;
      border-width: 0 0 1px;
    }

    &--round {
      border-radius: 9em;
    }

    .w-select--focused &,
    .w-select--open & {
      border-color: currentColor;
    }

    // Underline.
    &--underline:after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 0;
      border-bottom: 2px solid currentColor;
      transition: $transition-duration;
      transform: scaleX(0);
      pointer-events: none;
    }

    .w-select--focused &--underline:after,
    .w-select--open &--underline:after {
      transform: scaleX(1);
    }
    &--round.w-select__selection-wrap--underline:after {
      border-radius: 9em;
      transition: $transition-duration, height 0.035s;
    }
    .w-select--focused &--round.w-select__selection-wrap--underline:after,
    .w-select--open &--round.w-select__selection-wrap--underline:after {
      height: 100%;
      transition: $transition-duration,
        height 0s ($transition-duration - 0.035s);
    }
  }

  // selection (input) field.
  // ------------------------------------------------------
  &__selection {
    width: 100%;
    height: 100%;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    padding-left: 2 * $base-increment;
    padding-right: 2 * $base-increment;
    cursor: pointer;

    .w-select__selection-slot + & {
      position: absolute;
      top: 0;
      left: 0;
    }
    .w-select--no-padding & {
      padding-left: 0;
      padding-right: 0;
    }

    .w-select__selection-wrap--round & {
      padding-left: 3 * $base-increment;
      padding-right: 3 * $base-increment;
    }

    .w-select--inner-icon-left & {
      padding-left: 27px;
    }
    &-slot,
    .w-select--inner-icon-right & {
      padding-right: 22px;
    }

    .w-select--disabled & {
      color: $disabled-color;
      cursor: not-allowed;
      -webkit-tap-highlight-color: transparent;
    }

    .w-select--disabled input::placeholder {
      color: inherit;
    }

    .w-select--readonly & {
      cursor: auto;
    }
  }

  &__selection-slot {
    z-index: 1;
    pointer-events: none;
  }

  // Icons inside.
  // ------------------------------------------------------
  &__icon {
    position: absolute;
    font-size: 1.4em;

    .w-select--focused &,
    .w-select--open & {
      color: currentColor;
    }

    .w-select--disabled &,
    .w-select--readonly & {
      color: $disabled-color;
      cursor: not-allowed;
      -webkit-tap-highlight-color: transparent;
    }

    &--inner-left {
      left: 6px;
    }
    &--inner-right {
      right: 6px;
      @include default-transition;
    }
    .w-select--no-padding &--inner-left {
      left: 1px;
    }
    .w-select--no-padding &--inner-right {
      right: 1px;
    }

    .w-select--open &--inner-right {
      transform: rotate(180deg);
    }
  }

  // Label.
  // ------------------------------------------------------
  &__label {
    display: flex;
    align-items: center;
    transition: color $transition-duration;
    cursor: pointer;

    &--left {
      margin-right: 2 * $base-increment;
    }
    &--right {
      margin-left: 2 * $base-increment;
    }

    .w-select--disabled & {
      color: $disabled-color;
      cursor: not-allowed;
      -webkit-tap-highlight-color: transparent;
    }
    .w-select--readonly.w-select--empty & {
      opacity: 0.5;
      cursor: auto;
    }
  }

  &__label--inside {
    position: absolute;
    top: 50%;
    left: 0;
    // Use margin instead of padding as the scale transformation bellow decreases the real padding
    // size and misaligns the label.
    margin-left: 2 * $base-increment;
    transform: translateY(-50%);
    pointer-events: none;

    .w-select--no-padding & {
      left: 0;
      margin-left: 0;
    }
    .w-select__selection-wrap--round & {
      margin-left: round(3 * $base-increment);
    }
    .w-select--inner-icon-left & {
      left: 18px;
    }
    .w-select--no-padding.w-select--inner-icon-left & {
      left: 26px;
    }

    .w-select--floating-label & {
      transform-origin: 0 0;
      transition: $transition-duration ease;
    }

    // move label with underline style.
    .w-select--focused.w-select--floating-label &,
    .w-select--open.w-select--floating-label &,
    .w-select--filled.w-select--floating-label &,
    .w-select--has-placeholder.w-select--floating-label & {
      transform: translateY(-160%) scale(0.85);
    }
    // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
    .w-select--floating-label .w-select__select:-webkit-autofill & {
      transform: translateY(-160%) scale(0.85);
    }
    // Move label with outline style or with shadow.
    .w-select--focused.w-select--floating-label
      .w-select__selection-wrap--box
      &,
    .w-select--open.w-select--floating-label .w-select__selection-wrap--box &,
    .w-select--filled.w-select--floating-label .w-select__selection-wrap--box &,
    .w-select--has-placeholder.w-select--floating-label
      .w-select__selection-wrap--box
      & {
      transform: translateY(-180%) scale(0.85);
    }
    .w-select--focused.w-select--floating-label.w-select--inner-icon-left &,
    .w-select--open.w-select--floating-label.w-select--inner-icon-left &,
    .w-select--filled.w-select--floating-label.w-select--inner-icon-left & {
      left: 0;
    }
    // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
    .w-select--floating-label.w-select--inner-icon-left
      .w-select__select:-webkit-autofill
      & {
      left: 0;
    }

    .w-select--focused &,
    .w-select--open & {
      color: currentColor;
    }
  }

  // Menu.
  // ------------------------------------------------------
  &__menu {
    margin: 0;
    max-height: 300px;
    overflow: auto;
    background-color: #fff;
    border: $border;
    border-radius: $border-radius;

    .w-list {
      width: 100%;
    }
  }
}
